import React from "react";
import GlobalContext from "@src/common/global-context";
import { Link } from "react-router-dom";
import classnames from "classnames";
import { Card, Divider } from "antd";
import { RouterProps } from "@src/store";
import ThreeJs from "@src/views/threejs";
import "./style.css";

type HomeState = {
  reduxList: any[];
};

type HomeProps = RouterProps;

export default class Home extends React.PureComponent<HomeProps, HomeState> {
  static contextType = GlobalContext;

  constructor(props) {
    super(props);
    this.state = {
      reduxList: [
        {
          title: "redux-class-example",
          describe: "类组件使用redux的实例",
          path: "/redux-example/class",
        },
        {
          title: "redux-function-example",
          describe: "函数组件使用redux的实例",
          path: "/redux-example/function",
        },
      ],
    };
  }

  render() {
    const { name } = this.context;
    const { reduxList } = this.state;
    return (
      <div className="home-page">
        <ThreeJs color="#9AB4CD" />
        <div className="content">
          <h1 className="header white">{name}</h1>
          <h2 className="white">example</h2>
          <Divider orientation="center" className="white">
            redux example
          </Divider>
          <div className="card-wrap">
            {reduxList.map((item, index) => (
              <Card
                key={item.title}
                title={item.title}
                extra={<Link to={item.path}>查看实例</Link>}
                style={{ width: 300 }}
              >
                <p>{item.describe}</p>
              </Card>
            ))}
          </div>
          <Divider orientation="center" className="white">
            css example
          </Divider>
          <div className="card-wrap">
            <Card title="Glassmorphism" extra={<Link to="/glassmorphism">查看实例</Link>} style={{ width: 300 }}>
              <p>毛玻璃效果实例</p>
            </Card>
          </div>
          <Divider orientation="center" className="white">
            other example
          </Divider>
          <div className="card-wrap">
            <Card title="flybird" extra={<Link to="/flybird">查看实例</Link>} style={{ width: 300 }}>
              <p>Echarts实现的飞行小鸟小游戏</p>
            </Card>
          </div>
          <div className="card-wrap">
            <Card title="threejs" extra={<Link to="/threejs">查看实例</Link>} style={{ width: 300 }}>
              <p>threejs 3D模型实例</p>
            </Card>
          </div>
          <div className="card-wrap">
            <Card title="threeSpace" extra={<Link to="/three-space">查看实例</Link>} style={{ width: 300 }}>
              <p>threejs 太空模型实例</p>
            </Card>
          </div>
        </div>
      </div>
    );
  }
}
